<template>
	<div>
		<!-- <div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="fa fa-bars"></i> 商品管理</el-breadcrumb-item>
				<el-breadcrumb-item>商品列表</el-breadcrumb-item>
			</el-breadcrumb>
		</div> -->
		<div class="handle-box">
				<!-- <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addContent">添加商品</el-button> -->
				<!--      <el-button type="primary" icon="el-icon-refresh" @click="getData">刷新</el-button>-->

				<!-- <el-select v-model="isMarketable" placeholder="请选择" @change="getData">
					<el-option label="上架商品" :value="true">
					</el-option>
					<el-option label="下架商品" :value="false">
					</el-option>
				</el-select> -->
			 <el-form :inline="true" :model="filters" class="demo-form-inline">
					<el-row :gutter="10">
						<el-col :span="7">
							<div class="grid-content anmulu">按目录
							<el-select  v-model="onemenuValue" clearable placeholder="请选择" @change='getmenuSec'>
								<el-option
								v-for="item in headeroptions"
								:key="item.id"
								:label="item.typeName"
								:value="item.id"
								>
								</el-option>
							</el-select>
							<el-select v-model="twomenuValue" clearable placeholder="请选择">
								<el-option
								v-for="item in headerSecond"
								:key="item.id"
								:label="item.typeName"
								:value="item.id"
								>
								</el-option>
							</el-select>
							</div>
						</el-col>
						<el-col :span="6">  
								<el-form-item label="按名称">
									<el-input v-model="filters.strTitle" placeholder="按名称" style="width: 160px;"></el-input>
								</el-form-item>
						</el-col>

						<el-col :span="9">
								 <div class="block headerTime">
								<el-form-item label="按时间">
									<el-date-picker
									v-model="headerTime"
									type="daterange"
									align="right"
									unlink-panels
									range-separator="至"
									start-placeholder="开始日期"
									end-placeholder="结束日期"
									value-format="yyyy-MM-dd"
									:picker-options="pickerOptions2">

									</el-date-picker>
								</el-form-item>	
								</div>
						</el-col>
						<el-col :span="2">
							<div class="grid-content bg-purple">
								<el-button type="primary" icon="el-icon-search"  @click.native="getMaintains">搜索</el-button>
							</div>
						</el-col>
					</el-row>
			 </el-form>		
		</div>
		<div class="container" v-show="isMarketable">
			<el-table :data="tableData" Checkbox border v-loading="listLoading" style="width: 100%" fit ref="multipleTable" :default-sort="{prop:'sort_num',order:'descending'}" @cell-mouse-enter="handleSelectCell">
				<el-table-column prop="id" width="40" label="序号" type="index">
					<!-- <template slot-scope="scope"> -->
						<!-- {{scope.row.$index}} -->
					<!-- </template> -->
				</el-table-column>
				<el-table-column  label="创建时间"  width="105" prop="createTime" sortable >
					<template slot-scope="scope"  >
						<!-- {{scope.row.createTime}} -->
						{{moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss')}}
					</template>	
				</el-table-column>
				<el-table-column label="缩略图" width="70">
					<template slot-scope="scope">
						<img class="thumbnail" :src="imgUrl+scope.row.thumbnail" >
					</template>
				</el-table-column>
				<el-table-column prop="name" label="商品名称" width="300">
						<!-- <template slot-scope="scope">
							{{scope.row.Name}}
						</template> -->
						<template slot-scope="scope">
                            <span v-html="brightenKeyword(scope.row.Name, filters.strTitle)" ></span>
                        </template>
				</el-table-column>
				<el-table-column label="商品类目" width="60">
					<template slot-scope="scope">
						{{scope.row.oneCatalog}}
					</template>
				</el-table-column>
				
				<el-table-column label="上架时间"    prop="shelfTime" sortable width="105">
					<template slot-scope="scope">
						<el-button type="primary"  v-if="scope.row.state!='ONTHESHELF'"  @click="shelfGoods(scope.$index, scope.row)">
						{{scope.row.state!=='ONTHESHELF'?"上架":scope.row.shelfTime}}
						</el-button>
						<div v-if="scope.row.state=='ONTHESHELF'">
							<!-- {{scope.row.shelfTime}} -->
							{{moment(scope.row.shelfTime).format('YYYY-MM-DD HH:mm:ss')}}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="下架时间"  width="105"  prop="downTime" sortable>
					<template slot-scope="scope">
						<el-button type="primary"  v-if="scope.row.state=='ONTHESHELF'" @click="downGoods(scope.$index, scope.row)" >
							{{scope.row.state=="ONTHESHELF"?"下架":scope.row.downTime}}
						</el-button>
						<div v-if="scope.row.state=='LOWERFRAME'">
							<!-- {{scope.row.downTime}} -->
							{{moment(scope.row.downTime).format('YYYY-MM-DD HH:mm:ss')}}

						</div>
					</template>
				</el-table-column>
				<el-table-column prop="price" label="销售价格" sortable width="105">
					<template slot-scope="scope">
						{{scope.row.price}}
					</template>
				</el-table-column>
			
				<el-table-column label="起订数量">
						<!-- <el-switch v-model="scope.row.isRecommend" active-color="#009688" inactive-color="#ff4949" :active-value="1" :inactive-value="0" @change="changeIsRecommend">
						</el-switch>
						stock -->
					<template slot-scope="scope">
						{{scope.row.miniOrder}}
					</template>
				</el-table-column>

				<el-table-column prop="stock" label="库存数量">
					<template slot-scope="scope">
							{{scope.row.stock}}
					</template>
				</el-table-column>
				<el-table-column prop="sales" label="销量(成交量)">
						<template slot-scope="scope">
							{{scope.row.sales}}
						</template>
				</el-table-column>
				<el-table-column label="操作" width="120"  fixed="right">
					<template slot-scope="scope">
						<a href="javascript:;">刷新 </a>

						<span class="bianji">
							<router-link :to="{ path: '/goodsEdit?id='+scope.row.id}">编辑 </router-link>
						</span>
						
						<a href="javascript:;" @click="batchRemove(scope.$index, scope.row)" style="color:red">删除 </a>

						<!-- <a href="javascript:;" v-if="scope.row.isMarketable" @click="handleXiajia(scope.$index, scope.row)"> <i class="el-icon-delete"></i>下架 </a> -->
						<!-- <a href="javascript:;" v-if="scope.row.isMarketable==false" @click="handleShangjia(scope.$index, scope.row)"> <i class="el-icon-delete"></i>上架 </a> -->
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="productPage.pageNumber" :page-sizes="[10,20, 30, 40]" :page-size="productPage.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="productPage.totalRow">
			</el-pagination>
		</div>
		<!-- <div class="container" v-show="!isMarketable">
			<el-table :data="tableData" Checkbox border style="width: 100%" fit ref="multipleTable" :default-sort="{prop:'sort_num',order:'descending'}" @cell-mouse-enter="handleSelectCell">
				<el-table-column prop="sort_num" width="60" label="排序">
					<template slot-scope="scope">
						<el-input @change="handleSort(scope.$index,scope.row)" class="input-sort" v-model="scope.row.sort_num" placeholder=""></el-input>
					</template>
				</el-table-column>
				<el-table-column prop="id" label="id" width="60">
				</el-table-column>
				<el-table-column label="缩略图" width="70">
					<template slot-scope="scope">
						<img class="thumbnail" :src="scope.row.thumbnail_temp">
					</template>
				</el-table-column>
				<el-table-column prop="name" label="商品名称" width="300">
				</el-table-column>
				
				<el-table-column prop="price" label="销售价">
					<template slot-scope="scope">
						{{scope.row.price}}
					</template>
				</el-table-column>
				<el-table-column label="市场价">
					<template slot-scope="scope">
						{{scope.row.marketPrice}}
					</template>
				</el-table-column>
				<el-table-column prop="stock" label="库存">
				</el-table-column>
				<el-table-column prop="sales" label="销量">
				</el-table-column>
				<el-table-column label="操作" width="150">
					<template slot-scope="scope">
						<a href="javascript:;" @click="handleDelete(scope.$index, scope.row)"> <i class="el-icon-refresh"></i>刷新 </a>
						<a href="javascript:;" v-if="scope.row.isMarketable==false" @click="handleShangjia(scope.$index, scope.row)"> <i class="fa fa-random"></i>上架 </a>
						<a href="javascript:;" @click="handleDelete(scope.$index, scope.row)"> <i class="el-icon-delete"></i>删除 </a>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="productPage.pageNumber" :page-sizes="[10,20, 30, 40]" :page-size="productPage.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="productPage.totalRow">
			</el-pagination>
		</div> -->
	</div>
</template>

<script>
export default {
  data: function() {
    return {
      isMarketable: true,
      tableData: [],
      productPage: {
        pageNumber: 1,
        pageSize: 10
      },
      selectedGoods: {},
      headerTime: "",
      headeroptions: [],
      headerSecond: [],
      headervalue: "",
      headerName: "",
      onemenuValue: "",
      twomenuValue: "",
      pickerOptions2: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      productPage: {
        pageNumber: 1,
        pageSize: 10
      },
      filters: {
        strTitle: "",
        strContent: "",
        createTime: "",
        updateTime: "",
        cStartTime: ""
      },
      addLoading: false
    };
  },
  methods: {
    addContent() {
      this.$router.push({
        path: "/goodsEdit"
      });
    },
    getData() {
      this.listLoading = true;
      this.$axios.get("/one9-web/goods/list", 
         this.qs.stringify({currPage:this.productPage.pageNumber}))
        .then(res => {
          if (res.code == "OK") {
            this.listLoading = false;
            this.tableData = res.data.records;
          } else {
            alert(res.msg);
          }
        });
    },
    batchDel() {},
    getmenu() {
      //一级目录
      this.$axios.get("/one9-web/goodsType/oneType").then(res => {
        if ((res.code = "OK")) {
          this.headeroptions = res.data.data;
        }
      });
    },
    getmenuSec() {
      //二级目录
      if (this.onemenuValue)
        this.$axios
          .get("/one9-web/goodsType/twoType", {
            params: {
              upperLevel: this.onemenuValue
            }
          })
          .then(res => {
            if ((res.code = "OK")) {
              this.headerSecond = res.data;
            }
          });
    },
    getMaintains() {
      //搜索页面
      this.listLoading = true;
      this.$axios
        .get("/one9-web/goods/list", {
          params: {
            currPage: this.productPage.pageNumber,
            oneCatelog: this.onemenuValue,
            twoCatelog: this.twomenuValue,
            shopname: this.filters.strTitle,
            stratTime: this.headerTime[0],
            endTime: this.headerTime[1]
            // sort:this.headerTime,
          }
        })
        .then(res => {
          if (res.data.code == "OK") {
            this.listLoading = false;
            this.tableData = res.data.data.records;
          } else {
            alert(res.msg);
          }
        });
    },
    handleSort(index, row) {
      this.$set(this.tableData, 0, this.tableData[0]);
      this.saveGoods(row);
    },
    handleSelectCell(row, column, cell, event) {
      this.selectedGoods = row;
    },
    handleXiajia(index, row) {
      let goods = row;
      goods.isMarketable = false;
      for (let o in this.tableData) {
        if (this.tableData[o].id == row.id) {
          this.tableData.splice(o, 1);
          break;
        }
      }
      this.saveGoods(goods);
    },
    handleShangjia(index, row) {
      let goods = row;
      goods.isMarketable = true;
      for (let o in this.tableData) {
        if (this.tableData[o].id == row.id) {
          this.tableData.splice(o, 1);
          break;
        }
      }
      this.saveGoods(goods);
    },
    saveGoods(goods) {
      this.$axios({
        method: "post",
        url: this.HOST + "/product/updateProduct",
        data: goods
      }).then(res => {
        if (res.data.code == 0) {
          this.$message.success("保存成功");
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    changeIsRecommend(val) {
      let goods = this.selectedGoods;
      goods.isRecommend = val;
      this.saveGoods(goods);
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum);
      this.$set(this.productPage, "pageNumber", pageNum);
      this.getData();
    },
    handleSizeChange(pageSize) {
      this.$set(this.productPage, "pageSize", pageSize);
      this.getData();
    },
    brightenKeyword(val, keyword) {
      const Reg = new RegExp(keyword, "i");
      if (val) {
        return val.replace(
          Reg,
          `<span style="color: #409EFF;">${keyword}</span>`
        );
      }
    },
    batchRemove(index, row) {
      var ids = this.tableData.map(item => item.id).toString();
      let arrids = ids.split(",");
      console.log(ids, index, row);
      this.$confirm("确认删除该项吗？", "提示", {
        type: "warning"
      })
        .then(() => {
          this.listLoading = true;
          //NProgress.start();
          // let para = { ids: ids };
          this.$axios
            .post(this.HOST + "/one9-web/goods/delect?id=" + arrids[index])
            .then(res => {
              if (res.data.code == "OK") {
                this.$message({
                  message: "删除成功",
                  type: "success"
                });
                this.getData();
              } else {
                alert(res.msg);
              }
            });
        })
        .catch(() => {});
    },
    shelfGoods(index, row) {
      let goodids = this.tableData.map(item => item.id).toString();
      let arrids = goodids.split(",");
      console.log(arrids, index);
      this.$axios
        .post( "/one9-web/goods/shelfGoods?id=" + arrids[index])
        .then(res => {
          if (res.data.code == "OK") {
            this.listLoading = false;
            this.getData();
            // this.tableData=res.data.data.records;
          } else {
            alert(res.msg);
          }
        });
    },
    downGoods(index, row) {
      let goodids = this.tableData.map(item => item.id).toString();
      let arrids = goodids.split(",");
      console.log(arrids, index);
      this.$axios
        .post( "/one9-web/goods/downGoods?id=" + arrids[index])
        .then(res => {
          if (res.data.code == "OK") {
            this.listLoading = false;
            this.getData();
            // this.tableData=res.data.data.records;
          } else {
            alert(res.msg);
          }
        });
    }
  },
  created() {
    this.getData();
    this.getmenu();
    this.getmenuSec();
  }
};
</script>

<style scoped>
.el-table .cell .thumbnail {
  width: 60px;
}
.bianji a {
  color: #000;
}
.handle-box {
  padding-right: 15px;
  margin-bottom: 10px;
}
.anmulu .el-select {
  width: 110px;
}
</style>
<style>
.anmingcheng .el-input {
  width: 180px;
}
.anmingcheng .el-input .el-input__inner {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}
.anmingcheng .headerTime {
  width: 330px;
}
</style>
